<html>
    <head>
        <meta charset="UTF-8">
        <title>easyui学习笔记</title>
        <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui-1.4.2/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="jslib/easyui-1.4.2/themes/icon.css"/>
        <script type="text/javascript" src="jslib/easyui-1.4.2/jquery.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="jslib/easyui-1.4.2/jquery.easyui.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="jslib/easyui-1.4.2/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
         <script type="text/javascript">
         $(function () {
             /*树形菜单点击处理*/
             $("#tree").tree({
                 url : 'json/treeData.json',
                 lines : true,
                 onClick : function (node) {
                     if (node.attributes) {
                         openTab(node.text, node.attributes.url);
                     }
                 }
             });
             /*在右边center区域打开菜单，新增tab*/
             function openTab(title, url) {
                 //判断是否已存在
                 if ($("#tabs").tabs('exists', title)) {  
                     $('#tabs').tabs('select', title);
                 } else {
                     //新增tab
                     $('#tabs').tabs('add', {
                         title : title,
                         closable : true,
                         content : createTabContent(url)
                     });
                 }
             }
          
             /* 生成tab内容 */
             function createTabContent(url){
                 return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
             }
      
             /*绑定tabs的右键菜单*/
             $("#tabs").tabs({
                 onContextMenu : function (e, title) {
                     e.preventDefault();
                     $('#tabsMenu').menu('show', {
                         left : e.pageX,
                         top : e.pageY
                     }).data("tabTitle", title);
                 }
             });
              
             /*实例化menu的onClick事件*/
             $("#tabsMenu").menu({
                     onClick : function (item) {
                     CloseTab(this, item.name);
                 }
             });
              
             /*右键菜单关闭事件的处理*/
             function CloseTab(curTab, itemName) {
                 //选中的tab的title
                 var curTabTitle = $(curTab).data("tabTitle");
                 //所有tab
                 var allTabs = $("#tabs").tabs("tabs");
                 //所有tab的title的数组
                 var allTabsTitle = [];
                 //关闭菜单
                 if (itemName === "close") {
                     $("#tabs").tabs("close", curTabTitle);
                     return;
                 }       
                 //遍历所有tab
                 $.each(allTabs, function () {
                     var optTab = $(this).panel("options");
                     //关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
                     if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
                         //往tab的title数组中添加title
                         allTabsTitle.push(optTab.title);
                     //关闭所有
                     } else if (optTab.closable && itemName === "closeall") {
                         allTabsTitle.push(optTab.title);
                     }
                 }); 
                 //for循环逐个关闭
                 for (var i = 0; i < allTabsTitle.length; i++) {
                     $("#tabs").tabs("close", allTabsTitle[i]);
                 }
             }
             /*切换主题*/
             changeTheme=function (themeName) {
                 var $easyuiTheme = $('#easyuiTheme');
                 var url = $easyuiTheme.attr('href');
                 var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
                 $easyuiTheme.attr('href', href);
                 var $iframe = $('iframe');
                 if ($iframe.length > 0) {
                     for (var i = 0; i < $iframe.length; i++) {
                         var ifr = $iframe[i];
                         $(ifr).contents().find('#easyuiTheme').attr('href', href);
                     }
                 }
             };  
     });
     </script>
     </head>
     <body class="easyui-layout">
         <div id="head" data-options="region:'north'" style="height:60px;">
             <div style="height:30px;font-size:30px">MISP</div>
             <div style="text-align: right;">
                 <a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
             </div>
             <div id="theme" style="width: 100px; display: none;">
                 <div onclick="changeTheme('default');">浅蓝</div>
                 <div onclick="changeTheme('gray');">灰色</div>
                 <div onclick="changeTheme('black');">黑色</div>
                 <div onclick="changeTheme('metro');">Metro</div>
                 <div onclick="changeTheme('bootstrap');">Bootstrap</div>
             </div>
         </div>
         <div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div>
         <div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航">
                 <div id="navMenu" class="easyui-accordion" data-options="fit:true,border:false">
                     <div title="系统管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                     </div>
                     <div title="基础数据" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                     <ul id="tree" class="easyui-tree" data-options="lines:true"></ul>    
                     </div>    
                 </div>
         </div>
         <div id="mainPanle" data-options="region:'center'">
             <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
                 <div title="About" data-options="iconCls:'icon-tip'">
                     <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
                 </div>
             </div>    
         </div>
         <div id="tabsMenu" class="easyui-menu" style="width:150px;">
             <div data-options="name:'close'">关闭</div>
             <div class="menu-sep"></div>
             <div data-options="name:'closeall'">全部关闭</div>
             <div data-options="name:'closeother'">除此之外全部关闭</div>
         </div>
     </body>
</html>